import React from "react";
import { Button, Image, View } from "@tarojs/components";
import "./index.scss";

export default () => {
  const tickets = [
    {
      id: 1,
      name: "景点A",
      image:
        "https://th.bing.com/th/id/OIP.4nebqvBe1B_c15MR7aNxWAHaD_?rs=1&pid=ImgDetMain",
      isBooked: false,
    },
    {
      id: 2,
      name: "景点B",
      image:
        "https://th.bing.com/th/id/OIP.4nebqvBe1B_c15MR7aNxWAHaD_?rs=1&pid=ImgDetMain",
      isBooked: true,
    },
  ];

  return (
    <View className="ticket-page">
      {tickets.map((ticket) => (
        <View key={ticket.id} className="ticket-card">
          <Image className="ticket-image" src={ticket.image} />
          <View className="ticket-info">
            <View className="ticket-name">{ticket.name}</View>
          </View>
          <View style={{ marginLeft: "auto" }}>
            <Button
              className={`reserve-button ${ticket.isBooked ? "booked" : ""}`}
            >
              {ticket.isBooked ? "已购票" : "点击预约"}
            </Button>
          </View>
        </View>
      ))}
    </View>
  );
};
